<!-- 商品列表页 -->
<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="gotoProductDetail(product)">
          
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>
          
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{ product.goods_price | formatNum }}</view>
            </view>
          </view>
          
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
 components: {},
 props: {},
 data() {
 return {
  // 商品的默认图片
  defaultImage: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
   // 请求参数对象
   params: {
      // 1. 查询关键词
      query: "",
      
      // 2. 分类Id
      cid: "",
      
      // 3. 页码
      pagenum: 1,
      
      // 4. 每页条数
      pagesize: 20,
    },
    productList:[],	// 商品数据
      
    total: 0,// 商品数据总条数，用来实现分页
    isLoading:false//节流变量
 };
 },
 //过滤器
//  filters: {
//   formatNum(value) {
//     return Number(value).toFixed(2)
//   },
// },
 onLoad({query,cid}){
 this.params.query=query||''
 this.params.cid=cid||''
// 调用获取商品列表数据的方法
this.getProductList();
 },
 //小程序生命周期，页面上拉触底的时候触发
 onReachBottom(){
  //判断上拉请求数据完毕,停止继续请求
  if(this.productList.length===this.total) return this.$showMessage('数据已加载完毕')
  //优化: 当正在请求商品列表接口时, 不再额外请求商品列表接口(保证同一时间段最多只有一个请求)
  if(this.isLoading) return //如果isLoading:true就终止防止程序重复触发
  // console.log('触底');
  //页码加一
  this.params.pagenum++
  this.getProductList()
 },
 //下拉刷新生命周期
 async onPullDownRefresh(){
  this.params.pagenum=1//重置页码
  this.productList=[]//商品列表
 await this.getProductList() //await等待执行完毕后再继续关闭下拉刷新
 uni.stopPullDownRefresh();//关闭下拉刷新

 },
 methods: {
  // 获取商品列表数据的方法
async getProductList() {
  this.isLoading=true//把isLoading=true表明请求正在加载
  const { meta:{status}, message } = await this.$http.get("/goods/search", this.params);
  // 请求失败处理
  if (status !== 200) return this.$showMessage()
  // this.productList = message.goods;
  //两种合并方法
  //1.
  this.productList.push(...message.goods)
  //因为 message.goods本身是一个数组，而 push 方法会将整个数组作为一个元素添加进去，而不是合并数组,
  //用展开运算符展开式数组...message.goods就会把每一项元素添加到this.productList达到合并的效果
  //2.
  // this.productList=[...this.productList,...message.goods]
   //每一次下拉展开的...message.goods就会把每一项元素添加到...this.productList里面
   //因为...this.productList也是展开的所以不会出现数组嵌套[[productList,goods]goods],
   //合并效果[productList,productList]

  this.total = message.total;//商品数据总条数
  this.isLoading=false//当前请求结束意味着就可以再次发送请求,把isLoading改为false可以再次请求
},
//跳转详情页
gotoProductDetail(product){
  uni.navigateTo({ url: '../../pages_sub1/product-detail/product-detail?goods_id='+product.goods_id })
}
 },
}
</script>
<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>